
<template>
  <div class="shopClass">
    <van-nav-bar :title="params.title"
                 left-arrow
                 @click-left="$router.back()"
                 style="background:#4d8ee1;"
                 fixed />

    <div class="category">
      <van-dropdown-menu active-color="#4d8ee1"
                         duration="0.5"
                         :close-on-click-overlay="false">
        <van-dropdown-item @open="categoryBtn"
                           ref="dropdownItem">
          <template slot="title">{{params.title}}</template>
          <template slot="default">
            <van-tree-select :items="items"
                             @click-nav="indexBtn">
              <template #content>
                <van-row v-for="(item) in treeList"
                         :key="item.id"
                         @click="changebtn({restaurant_category_id: item.id,offset: $refs.shoplist.offset})"
                         class="treeList">
                  <van-col :span="19"> {{item.name}} </van-col>
                  <van-col :span="5">
                    <van-tag color="#ccc"
                             round
                             type="small">{{item.count}}</van-tag>
                  </van-col>

                </van-row>
              </template>

            </van-tree-select>

          </template>

        </van-dropdown-item>
        <van-dropdown-item v-model="value"
                           :options="option1"
                           class="sort"
                           @change="changebtn({order_by: value,offset: $refs.shoplist.offset})">
          <div slot="title">排序</div>

        </van-dropdown-item>
        <van-dropdown-item ref="sizerItem">

          <div slot="title">筛选</div>
          <div slot="default">
            <van-row class="sizer">配送方式</van-row>

            <van-row>
              <van-col span="8"
                       class="sizerItem"
                       @click="select">
                <van-icon name="thumb-circle-o"
                          v-if="show"
                          color="rgb(58, 54, 54)"
                          size="20px" />
                <van-icon name="success"
                          v-else
                          color="#4d8de1"
                          size="20px" />
                <span :style="{color: show? ' rgb(58, 54, 54)':'#4d8de1'}"
                      class="item">蜂鸟专送</span>
              </van-col>
            </van-row>
            <div class="sizer">商家属性 <span>(可以多选)</span></div>
            <van-row type="flex"
                     justify="space-around">
              <van-col gutter='3px'
                       class="sizerItem"
                       v-for="(item, index) in  property"
                       :key="index"
                       @click="supportList(item.show,index)">
                <span v-if="item.show"
                      class="sizesupport">{{item.icon_name}}</span>
                <van-icon name="success"
                          v-else
                          color="#4d8de1"
                          size="20px" />
                <span :style="{color: item.show? ' rgb(58, 54, 54)':'#4d8de1'}"
                      class="item">{{item.text}}</span>
              </van-col>
            </van-row>
            <van-row type="flex"
                     justify="space-around"
                     class="btn">
              <van-button type="default"
                          @click="clearBtn">清空</van-button>
              <van-button type="primary"
                          @click="btnOk">确定{{ ( allCount ) }}</van-button>
            </van-row>

          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <shopList class="shoplist"
              ref="shoplist" />
  </div>
</template>

<script>
import { getCategoryList } from '@/api/shop'
import shopList from './shop'
export default {
  name: 'ShopClass',
  components: {
    shopList
  },
  data() {
    return {
      activeName: '',
      params: {},
      value: 4,

      option1: [
        { text: '默认排序', value: 4, icon: 'exchange' },
        { text: '距离最近', value: 5, icon: 'location-o' },
        { text: '销量排序', value: 6, icon: 'fire-o' },
        { text: '起送价最低', value: 1, icon: 'gold-coin-o' },
        { text: '配送速度最快', value: 2, icon: 'clock-o' },
        { text: '评分', value: 3, icon: 'star-o' },



      ],
      items: [],
      activeIndex: 0,
      treeList: [],
      list: [],
      itemcolor: "#rgb(59, 55, 55)",
      checked: true,
      show: true,
      property: [{ text: '品牌商家', icon_name: '品', show: true },
      { text: '外卖保', icon_name: '保', show: true },
      { text: '准时达', icon_name: '保', show: true },
      { text: '新店', icon_name: '新', show: true },
      { text: '在线支付', icon_name: '付', show: true },
      { text: '开发票', icon_name: '票', show: true }
      ],
      count: 0,
      selectCount: 0,
      delivery_mode: []
    }

  },
  created() {
    var nerarr = {}
    console.log(this.$route.params);
    this.$route.params.parmas.split('&').forEach(item => {
      const arr = item.split('=')
      var value = arr.pop()

      var name = arr.shift()

      nerarr[name] = value

    })
    this.params = nerarr

  },
  computed: {
    allCount() {
      return this.count + this.selectCount
    }

  },
  methods: {
    async categoryBtn() {
      const { data } = await getCategoryList()
      this.list = data
      this.treeList = this.list[0].sub_categories

      var list = []

      data.forEach(item => {
        var obj = {}
        obj.text = item.name
        obj.badge = item.count
        obj.id = item.id
        var children = []

        item.sub_categories.forEach(value => {
          var objkid = {}
          objkid.text = value.name
          objkid.count = value.count
          objkid.id = value.id
          children.push(objkid)
        })


        obj.children = children

        list.push(obj)

      })
      this.items = [...list]


    },
    indexBtn(index) {
      this.treeList = this.list[index].sub_categories
    },
    changebtn(value) {

      this.$refs.shoplist.list = []
      this.$refs.shoplist.onLoad(value)
      this.$refs.dropdownItem.toggle(false)

    },
    select() {
      this.show = !this.show
      this.selectCount = 0
      this.show ? this.selectCount : this.selectCount++
    },
    supportList(value, index) {

      this.property[index].show = !value
      this.$refs.sizerItem.toggle(true)
      this.count = 0
      this.property.forEach(item => item.show ? this.count : this.count++)
    },
    clearBtn() {
      this.show = true
      this.property.forEach(item => item.show = true)
      this.count = 0
      this.selectCount = 0
    },
    btnOk() {
      this.delivery_mode = []
      if (this.selectCount) {
        this.delivery_mode.push(1)
      }
      if (this.allCount) {
        this.changebtn({ ...{ delivery_mode: this.delivery_mode } })
      }
      this.clearBtn()
      this.$refs.sizerItem.toggle(false)

    }

  }




}
</script>

<style scoped>
::v-deep .van-icon {
  color: white;
}
::v-deep .van-nav-bar__title {
  color: white;
}
::v-deep .van-cell__title {
  flex: 1;
}
::v-deep .category {
  margin-top: 46px;
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100%;
}
::v-deep .van-dropdown-menu__title {
  font-size: 12px;
}
::v-deep .van-sidebar-item__text {
  font-size: 12px;
}
::v-deep .van-tree-select__item {
  font-size: 12px;
}
::v-deep .van-info {
  top: 10px;
  left: 40px;
  min-width: 35px;
  background-color: #ccc;
}
::v-deep .van-sidebar-item--select::before {
  background-color: #4d8de1;
}
::v-deep .van-tree-select__item--active {
  color: #4d8de1;
}
.treeList {
  height: 35px;
  line-height: 35px;
}
.treeList:hover {
  color: #4d8de1;
}
.shoplist {
  margin-top: 95px;
  height: 78hv;
}
::v-deep .sort .van-icon {
  color: #4d8de1;
  margin: 0 10px 0 0;
}
::v-deep .van-cell__title {
  font-size: 12px;
}
.img-icon {
  height: 20px;
}
.sizer {
  font-size: 12px;
  color: rgb(58, 54, 54);
  margin: 15px 10px;
}
.sizerItem {
  margin: 5px 3px;
  border: 1px solid #ccc;
  font-size: 12px;
  padding: 5px 25px 5px 10px;
  color: rgb(58, 54, 54);
  width: 110px;
}
.sizerItem .item {
  display: inline-block;
  line-height: 21px;
  margin-left: 3px;
}
.sizesupport {
  display: inline-block;
  border: 1px solid rgb(241, 151, 151);
  padding: 1px 4px;
  border-radius: 5px;
  color: rgb(241, 151, 151);
}
::v-deep .van-button {
  height: 35px;
  width: 48%;
  margin: 5px 3px 10px 3px;
}
.btn {
  background-color: rgb(248, 244, 244);
}
</style>